IdProo
IdProo Docs

Modul: Master Data — API — Scopes
Versi 1.0
Tanggal 21 April 2026
Aplikasi IdProo Admin
Audiens Administrator

Dalam artikel ini

  1. Menampilkan Daftar Scopes
  2. Menambahkan Scope
  3. Mencari Scope
  4. Preview Informasi Scope
  5. Mengubah Scope
  6. Menghapus Scope
  7. Import / Export Scopes
  8. Ringkasan Alur
  9. Solusi dan Tindakan Selanjutnya

1. Menampilkan Daftar Scopes

Halaman Scopes dapat diakses melalui navigasi: Master → API → Scopes.

Halaman ini menampilkan daftar seluruh scope API yang telah terdaftar dalam sistem.

screenshot-434-scopes-list

Gambar 1: Halaman Scopes menampilkan daftar scope dengan kolom Name, Display Name, Description, dan Created at.

Kolom yang tersedia pada tabel Scopes:

Kolom Keterangan
Name Nama teknis scope yang dapat diklik untuk melihat detail informasi (contoh: adhoc.add, adhoc.delete)
Display Name Nama tampilan scope yang lebih deskriptif (contoh: "Adhoc add", "Adhoc delete")
Description Keterangan singkat tentang fungsi scope (contoh: "Allow application to add new adhoc")
Created at Tanggal dan waktu data scope dibuat

Saat kursor diarahkan ke baris data, ikon Edit (✏) dan Delete (🗑) akan muncul di sebelah kanan baris tersebut.

2. Menambahkan Scope

Untuk menambahkan scope baru, klik tombol + New scope di pojok kiri atas tabel.

screenshot-435-new-scope-button

Gambar 2: Tombol + New scope untuk menambahkan scope baru.

Panel Create new scope akan terbuka di sisi kanan layar dengan form yang perlu diisi.

screenshot-436-create-scope-panel

Gambar 3: Panel Create new scope dengan field Name (wajib), Display Name (wajib), Description (wajib), dan Permission category (wajib, dropdown).

Form Create new scope terdiri dari:

Field Keterangan
Name Nama teknis scope dalam format dot-notation, misalnya resource.action (wajib diisi)
Display Name Nama tampilan scope yang mudah dibaca (wajib diisi)
Description Keterangan fungsi atau tujuan scope (wajib diisi)
Permission category Kategori permission yang menjadi induk scope, dipilih dari dropdown (wajib diisi)

Langkah-langkah menambahkan scope:

  1. Klik tombol + New scope.
  2. Isi field Name dengan nama teknis scope (format: resource.action).
  3. Isi field Display Name dengan nama tampilan yang deskriptif.
  4. Isi field Description dengan keterangan fungsi scope.
  5. Pilih Permission category dari dropdown yang tersedia.
  6. Klik Save untuk menyimpan data.
  7. Klik Cancel untuk membatalkan.

Setelah data berhasil disimpan, notifikasi hijau "Data saved successfully" akan muncul di bagian atas layar.

screenshot-437-data-saved-notification

Gambar 4: Notifikasi "Data saved successfully" yang muncul setelah scope berhasil ditambahkan.

Tips: Semua field bersifat wajib diisi. Gunakan konvensi penamaan yang konsisten untuk field Name, misalnya [resource].[action] (contoh: adhoc.add, user.read), agar mudah diidentifikasi dan dikelola.

3. Mencari Scope

Untuk mencari scope tertentu, gunakan kolom pencarian yang tersedia di bagian kanan atas tabel.

screenshot-438-search-scope

Gambar 5: Hasil pencarian scope dengan kata kunci "new scope" menampilkan data yang sesuai, lengkap dengan kolom Name, Display Name, Description, Created at, dan informasi pagination (1 - 2 of 2).

Langkah-langkah mencari scope:

  1. Klik kolom Search di bagian kanan atas tabel.
  2. Ketikkan kata kunci nama atau display name scope yang ingin dicari.
  3. Sistem akan menampilkan hasil yang sesuai secara otomatis.

Catatan: Pencarian bersifat dinamis dan akan memfilter data sesuai kata kunci yang dimasukkan. Klik tombol ✕ di kolom pencarian untuk menghapus filter dan menampilkan kembali seluruh data.

4. Preview Informasi Scope

Untuk melihat detail informasi scope, arahkan kursor ke baris data hingga ikon Edit dan Delete muncul, lalu klik Name pada baris yang diinginkan.

screenshot-439-scope-row-hover

Gambar 6: Baris scope saat kursor diarahkan menampilkan ikon Edit (✏) dan Delete (🗑) di sisi kanan.

Panel detail akan terbuka di sisi kanan layar menampilkan seluruh informasi scope.

screenshot-440-scope-detail-panel

Gambar 7: Panel detail scope menampilkan Category, Display name, Description, Created, Created by, Last modified, dan Last modified by.

Informasi yang ditampilkan pada panel detail scope:

Field Keterangan
Category Kategori permission yang menjadi induk scope
Display name Nama tampilan scope
Description Keterangan fungsi scope
Created Tanggal dan waktu scope dibuat
Created by Nama lengkap dan email pengguna yang membuat data
Last modified Tanggal dan waktu terakhir data diubah
Last modified by Nama lengkap dan email pengguna yang terakhir mengubah data

Catatan: Klik tombol Close untuk menutup panel detail dan kembali ke halaman daftar Scopes.

5. Mengubah Scope

Untuk mengubah data scope, klik ikon Edit (✏) yang muncul saat kursor diarahkan ke baris data.

screenshot-441-edit-icon-tooltip

Gambar 8: Ikon Edit (✏) dengan tooltip "Edit" yang muncul saat kursor diarahkan ke baris scope.

Panel Edit scope akan terbuka di sisi kanan layar menampilkan form dengan data yang sudah terisi sebelumnya.

screenshot-442-edit-scope-panel

Gambar 9: Panel Edit scope dengan field Name, Display name, Description, dan Permission category yang dapat diubah. Field Permission category menampilkan nilai saat ini beserta tombol Change untuk menggantinya.

Form Edit scope terdiri dari:

Field Keterangan
Name Nama teknis scope (wajib diisi)
Display name Nama tampilan scope (wajib diisi)
Description Keterangan fungsi scope (wajib diisi)
Permission category Kategori permission saat ini; klik tombol Change untuk mengganti kategori

Langkah-langkah mengubah scope:

  1. Arahkan kursor ke baris scope yang ingin diubah.
  2. Klik ikon Edit (✏) yang muncul di sisi kanan baris.
  3. Ubah nilai pada field Name, Display name, atau Description sesuai kebutuhan.
  4. Untuk mengubah Permission category, klik tombol Change lalu pilih kategori baru.
  5. Klik Save untuk menyimpan perubahan.
  6. Klik Cancel untuk membatalkan.

Catatan: Berbeda dari form Create yang menggunakan dropdown langsung, form Edit menampilkan kategori permission saat ini dalam field read-only beserta tombol Change untuk menggantinya.

6. Menghapus Scope

Sistem menyediakan dua cara untuk menghapus data scope: menghapus satu data atau menghapus beberapa data sekaligus.

6.1 Menghapus Satu Scope

Untuk menghapus satu scope, klik ikon Delete (🗑) yang muncul saat kursor diarahkan ke baris data.

screenshot-443-delete-icon-tooltip

Gambar 10: Ikon Delete (🗑) dengan tooltip "Delete" yang muncul saat kursor diarahkan ke baris scope.

Dialog konfirmasi akan muncul sebelum penghapusan dilakukan.

6.2 Menghapus Beberapa Scope Sekaligus

Untuk menghapus beberapa scope sekaligus, centang checkbox pada baris-baris yang ingin dihapus, kemudian klik tombol Delete item (n) yang muncul di toolbar atas tabel.

screenshot-444-bulk-delete-selection

Gambar 11: Semua scope dipilih menggunakan master checkbox dan tombol "Delete item (2)" aktif di toolbar.

Dialog konfirmasi akan muncul untuk memastikan penghapusan data.

screenshot-445-delete-confirmation-dialog

Gambar 12: Dialog konfirmasi "Delete Scopes" dengan pesan "Are you sure to delete this Scopes?" serta tombol Cancel dan Delete.

Langkah-langkah menghapus scope:

  1. Arahkan kursor ke baris scope (untuk hapus satu), atau centang checkbox pada beberapa baris (untuk hapus banyak).
  2. Klik ikon Delete (🗑) atau tombol Delete item (n).
  3. Dialog konfirmasi Delete Scopes akan muncul dengan pesan: "Are you sure to delete this Scopes?"
  4. Klik Delete untuk mengonfirmasi penghapusan.
  5. Klik Cancel untuk membatalkan.

⚠️ Perhatian: Penghapusan data scope bersifat permanen dan tidak dapat dibatalkan setelah dikonfirmasi. Pastikan scope yang akan dihapus tidak sedang digunakan dalam konfigurasi akses atau integrasi API aktif.

7. Import / Export Scopes

Fitur import dan export dapat diakses melalui menu OPTION (⋯) yang tersedia di bagian kanan atas tabel.

7.1 Import Scopes

Fitur import memungkinkan Administrator untuk menambahkan data scope secara massal melalui file Excel.

screenshot-446-option-menu-button

Gambar 13: Tombol menu OPTION (⋯) di bagian kanan atas tabel Scopes.

screenshot-447-option-menu-open

Gambar 14: Menu OPTION terbuka menampilkan pilihan Refresh, Import, dan Export.

Klik Import untuk membuka dialog import data.

screenshot-448-import-data-dialog

Gambar 15: Dialog "Import data" dengan area Drag & Drop atau Browse untuk memilih file, format yang didukung (XLS/XLSX), serta tombol Download untuk mengunduh Template example.

screenshot-449-file-browser-import

Gambar 16: Browser file menampilkan file "Import API Scope" yang dipilih untuk diunggah.

Setelah file dipilih dan proses import dimulai, notifikasi biru akan muncul.

screenshot-450-importing-notification

Gambar 17: Notifikasi biru "Importing data..." yang muncul saat proses import berjalan di latar belakang dengan pesan "Process runs in the background. Open notification to see details."

Langkah-langkah import scopes:

  1. Klik tombol OPTION (⋯) di bagian kanan atas tabel.
  2. Pilih Import dari menu dropdown.
  3. Dialog Import data akan terbuka.
  4. Unggah file dengan cara Drag & Drop atau klik Browse untuk memilih file dari perangkat.
  5. Pastikan file berformat XLS atau XLSX.
  6. Klik Open pada browser file untuk mengonfirmasi pilihan.
  7. Proses import akan berjalan di latar belakang. Notifikasi biru "Importing data..." akan tampil.
  8. Buka notifikasi untuk memantau status proses import.

Tips: Unduh Template example yang tersedia di dialog Import untuk memastikan format dan struktur kolom file sesuai dengan kebutuhan sistem. Nama file template yang disediakan: Import API Scope.xlsx. Template ini mencakup kolom Name, Display Name, Description, dan Permission category yang harus diisi dengan benar.

7.2 Export Scopes

Fitur export memungkinkan Administrator untuk mengunduh data scope dalam format Excel.

screenshot-451-option-menu-export

Gambar 18: Menu OPTION terbuka dengan opsi Export dalam kondisi aktif.

Klik Export untuk membuka dialog export data.

screenshot-452-export-data-dialog

Gambar 19: Dialog "Export data" dengan pilihan "This page" (dipilih) atau "All page", serta tombol Cancel dan Export.

screenshot-453-save-as-dialog

Gambar 20: Dialog Save As sistem dengan nama file "ApiScopes-20260421031253375" dalam format Microsoft Excel Worksheet.

screenshot-454-download-complete

Gambar 21: Browser menampilkan notifikasi unduhan "ApiScopes-20260421031253..." telah selesai (5.1 KB • Done).

Langkah-langkah export scopes:

  1. Klik tombol OPTION (⋯) di bagian kanan atas tabel.
  2. Pilih Export dari menu dropdown.
  3. Dialog Export data akan terbuka dengan dua pilihan:
    • This page — hanya mengekspor data pada halaman yang sedang ditampilkan.
    • All page — mengekspor seluruh data scope.
  4. Pilih opsi yang diinginkan, kemudian klik Export.
  5. Dialog Save As akan muncul dengan nama file otomatis: ApiScopes-YYYYMMDDHHMMSSMMM.
  6. Tentukan lokasi penyimpanan, lalu klik Save.
  7. File Excel akan diunduh dan notifikasi Done akan muncul di browser.

Catatan: Nama file hasil export mengikuti format ApiScopes-YYYYMMDDHHMMSSMMM.xlsx, dengan bagian angka merepresentasikan tanggal dan waktu export dilakukan.

8. Ringkasan Alur

[Halaman Scopes]
        |
        |--- [Tambah] --> Klik "+ New scope"
        |                       |
        |                       +--> Isi Name*, Display Name*, Description*,
        |                            Permission category* (semua wajib)
        |                       +--> Klik Save --> "Data saved successfully"
        |
        |--- [Cari] --> Ketik kata kunci di kolom Search
        |                       |
        |                       +--> Hasil difilter otomatis (Name / Display Name)
        |
        |--- [Preview] --> Klik Name / hover baris
        |                       |
        |                       +--> Panel detail terbuka (Category, Display name,
        |                            Description, Created, Created by,
        |                            Last modified, Last modified by)
        |
        |--- [Edit] --> Hover baris --> Klik ikon Edit (✏)
        |                       |
        |                       +--> Panel "Edit scope" terbuka
        |                       +--> Ubah field atau klik Change untuk
        |                            mengganti Permission category
        |                       +--> Klik Save
        |
        |--- [Hapus] --> Satu: Hover baris --> Klik ikon Delete (🗑)
        |             --> Banyak: Centang checkbox --> Delete item (n)
        |                       |
        |                       +--> Dialog: "Delete Scopes"
        |                       +--> Klik Delete --> Scope dihapus
        |
        |--- [Import] --> Klik OPTION (⋯) --> Import
        |                       |
        |                       +--> Upload file XLS/XLSX
        |                       +--> Proses berjalan di background
        |
        |--- [Export] --> Klik OPTION (⋯) --> Export
                                |
                                +--> Pilih This page / All page
                                +--> Klik Export --> Save As
                                +--> File: ApiScopes-YYYYMMDDHHMMSSMMM.xlsx

9. Solusi dan Tindakan Selanjutnya

Situasi Kemungkinan Penyebab Tindakan
Tombol Save tidak merespons saat menambah/mengedit Salah satu field wajib (Name, Display Name, Description, atau Permission category) belum diisi Pastikan semua field wajib telah terisi sebelum menyimpan
Scope tidak ditemukan saat pencarian Kata kunci tidak sesuai dengan Name atau Display Name Coba cari menggunakan kata kunci lain atau bagian dari nama scope
Scope tidak dapat dihapus Scope sedang digunakan dalam konfigurasi akses atau integrasi API Pastikan scope tidak aktif digunakan sebelum menghapus
Tombol Change pada Permission category tidak tersedia di form Create Pada form Create, category langsung dipilih dari dropdown Klik dropdown Permission category dan pilih kategori yang sesuai
Proses import tidak berjalan Format file tidak didukung Pastikan file berformat XLS atau XLSX sesuai template yang disediakan
File import gagal diproses Struktur kolom file tidak sesuai (Name, Display Name, Description, Permission category) Unduh dan gunakan Template example (Import API Scope.xlsx) dari dialog Import sebagai acuan
Export menghasilkan file kosong Tidak ada data pada halaman yang dipilih Pilih opsi All page atau pastikan ada data di halaman aktif
Data yang baru diimport tidak muncul di tabel Proses import masih berjalan di background Buka notifikasi untuk memantau status, lalu klik Refresh setelah selesai

Dokumen ini dibuat untuk keperluan panduan internal Administrator aplikasi IdProo.

© 2026 IdProo — Hak Cipta Dilindungi